<style>
.resource-dialog .el-dialog{
    padding:20px;
    box-shadow:9px 9px 30px 0px rgba(89,121,248,0.16);
}

.dialog-big-body-main {
    display: flex;
    justify-content: space-between;
}

.resource-dialog-header {
    display: flex;
    justify-content: space-between;
    align-items:center;
    margin:2px 0 20px 0;
}

.resource-dialog-header > span {
    color:#7485B1;
    font-size:14px;
     align-self:flex-end;
    /*align-items:*/
}

.resource-dialog-header .el-input {
    width:160px;
    height:40px;
    border-radius:2px;
}

.dialog-big-body-main .dialog-big-cont-l{
    width:280px;
    /*border:1px solid rgba(225,231,235,1);*/
}


.dialog-big-body-title {
    width:100%;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size:14px;
    color:#3A3A63;
    background-color:#F4F7FD;
}

.dialog-big-body-content {
    padding:10px 0 0;
    border-bottom:1px solid #E1E7EB;
}

.dialog-big-body-content .resource-tree {
    width:100%;
    height:168px;
    max-height: 235px;
    overflow-y: auto;
    color:#7485B1;
}

.dialog-big-cont-r {
    width:344px;
    height: 222px;
    border-bottom:1px solid #E1E7EB;
}
.dialog-big-cont-r .el-table td,.el-table th {
    /*border-bottom: 1px solid #e6ebf5;*/
    /*background-color: #F4F7FD;
    color:#3A3A63;*/
}

.el-table th {
    /*border-bottom: 1px solid #e6ebf5;*/
    background-color: #F4F7FD;
    color:#3A3A63;
    font-weight: 400
}

.dialog-big-cont-r .el-table tr td:first-child,.dialog-big-cont-r .el-table tr th:first-child {
    padding-left:20px;
}

.dialog-big-cont-r .el-table tr:hover td {
    background-color: #f5f7fa;
}

.dialog-big-cont-r .el-table tbody{
    width: 100%;
    height:178px;
    overflow-y: auto;
}


.dialog-big-cont-r .el-table .checkbox {
    display: inline-block;
    position: relative;
    border: 1px solid #dcdfe6;
    border-radius: 2px;
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    background-color: #fff;
    z-index: 1;
    transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),background-color .25s cubic-bezier(.71,-.46,.29,1.46);
    margin:0 14px 0 14px;
}

.dialog-big-cont-r .el-table .checkbox:after {
    box-sizing: content-box;
    content: "";
    border: 1px solid #fff;
    border-left: 0;
    border-top: 0;
    height: 7px;
    left: 4px;
    position: absolute;
    top: 1px;
    transform: rotate(45deg) scaleY(0);
    width: 3px;
    transition: transform .15s ease-in .05s;
    transform-origin: center;
}

.dialog-big-cont-r .el-table .checkbox:hover {
    border-color: #409eff;
}

.dialog-big-cont-r .el-table input:checked + .checkbox{
    background-color: #409eff;
    border-color: #409eff;
}


.dialog-big-cont-r .el-table input:checked + .checkbox:after{
    transform: rotate(45deg) scaleY(1);
}


.resource-dialog .el-dialog .el-dialog__header {
    text-align:left;
    padding: 10px;
    font-size: 20px;
    color: #000;
    line-height: 28px;
}

.resource-dialog .el-dialog  .el-dialog__footer {
    padding:10px;
    text-align: right
}


.resource-dialog .el-dialog .el-dialog__body {
    padding:20px 10px;
}


.resource-dialog .no-border {
    color: #7485B1;
    border: none;
}

.el-table--scrollable-y .el-table__body-wrapper {
    overflow-y: auto;
}
</style>

<template>
<el-dialog
    title="选择可见人"
    :visible.sync="personnelState"
    class="resource-dialog"
    width="720px"
    center>
    <div class="dialog-big-body">
        <div class="resource-dialog-header">
            <span>已选择{{selectUserList.length}}人</span>
            <el-input
                placeholder="搜索学员姓名"
                suffix-icon="el-icon-search"
                v-model="searchVal"
                @keyup.enter="searchFn"
                @blur="searchFn"
            >
            </el-input>
        </div>

        <div class="dialog-big-body-main" v-if="centerDialogVisible==true">
            <div class="dialog-big-cont-l">
                <div class="dialog-big-body-title">选择部门</div>
                <div class="dialog-big-body-content" >
                    <el-tree
                        class="resource-tree"
                        :data="nameList"
                        :props="propsName"
                        node-key="DepartmentID"
                        ref="tree"
                        highlight-current
                        default-expand-all="true"
                        @node-click="handleNodeClick"
                    >
                    </el-tree>
                </div>
            </div>

            <div class="dialog-big-cont-r">
                <div class="el-table el-table--enable-row-transition">
                    <el-table ref="selectUserOrganize" :data="list"  style="width: 100%" height="222" class="el-table--scrollable-y select-table el-table__body el-table-column--selection"  @select="raidoFn" @select-all="checkAllFn">
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column prop="Username" label="姓名"></el-table-column>
                        <el-table-column prop="Mobile" label="手机号"></el-table-column>
                      </el-table>
                </div>
            </div>
        </div>
    </div>
    <span slot="footer" class="dialog-footer">
        <el-button type="text no-border" @click="personnelState = false">取消</el-button>
        <el-button type="primary"  class="showdow" @click="getChecked">确 定</el-button>
    </span>
</el-dialog>
</template>
<script>
import qs from 'qs'

export default {
    props:['personnelState', 'recordSelectId', 'clearState'],
    data() {
        return {
            nameList:[], //部门列表数据
            curSelectId:[], //当前选择员工数据
            list:[], //员工列表数据
            selectUserList:[], //总选中员工列表
            selectUserName:[], //总选中员工名称
            oldcurSelectId:[], //记录以前（为当前）选中的值
            centerDialogVisible:false,
            all:"", //全选
            // 设置部门节点的默认值
            propsName: {
                label: 'DepartmentName',
                children: 'Child'
            },
        }
    },

    watch: {
        curSelectId(){
            if(this.list.length <= 0) return;

            if (this.curSelectId.length == this.list.length) {
                this.all = true
            } else {
                this.all = false
            }
        },

        personnelState(value) {
            !!this.clearState && ( this.selectUserList = [] )
            if(value) {
                this.choosePeople()
            } else {
                this.$emit('setUser', [],  false)
            }
        },

        // 记录外部传进来的id
        recordSelectId(value) {
             if( value == '' ) return;
            let param =  {'paginate':0, employeeIDs: value.join(',')}
            this.getEmployee(param).then((v)=>{
                this.selectUserList = v
                this.selectCurUser()
            })


        }
    },

    methods:{
        checkAllFn(value) {
            if( value.length > 0) {
                this.selectUserList.forEach((item)=>{
                    this.saveRadioData(item, 1)
                })
            } else {
                this.selectUserList.forEach((item)=>{
                    this.saveRadioData(item)
                })
            }

        },

        raidoFn(all, row) {
            this.saveRadioData(row)
        },


        saveRadioData(row, type) {
            let index = this.selectUserList.findIndex( item => item.EmployeeID === row.EmployeeID)

            if( index !== -1) {
                !type && this.selectUserList.splice(index, 1)
            } else {
                this.selectUserList.push(row)
            }

            console.log(this.selectUserList)
        },


        // 获取部门数据
        choosePeople(){
            this.centerDialogVisible = true
            this.getEmployeeList()


            axios.post('/com/department/getDepartmentTree', qs.stringify({})).then((res) => {
                var d = res.data;
                if(d.flag == 1){
                    this.nameList = d.data.Row
                }else {
                    this.$message.error(d.msg)
                }
            })
        },

        // 返回当前选中原部门员工
        getEmployeeList(id) {
            let param = !!id ? {'paginate':0, 'DepartmentID' : id} : {'paginate':0}
            axios.post('/com/employee/getEmployeeList', qs.stringify(param)).then((res) => {
                var d = res.data
                if(d.flag == 1){
                    this.list = d.data.Row
                    this.parentList = this.list
                    this.selectCurUser()
                }else {
                    this.$message.error(d.msg)
                }
            })
        },


        // 选中当前员工
        selectCurUser() {
            this.$nextTick(() => {
                this.selectUserList.forEach((item) => {
                    const temp = this.list.find((it) => it.EmployeeID === item.EmployeeID)

                    if (temp) {
                        this.$refs.selectUserOrganize.toggleRowSelection(temp)
                    }
                })
            })
        },


         // 获取员工数据
        async getEmployee(param) {

            let { data } = await axios.post('/com/employee/getEmployeeList', qs.stringify(param))

            if(data.flag === 1) {
                return data.data.Row
            } else {
                this.$message.error(data.msg)
                return []
            }
        },


        // 当前选择的部门 获取当前部门员工
        handleNodeClick(selectId){

            this.getEmployeeList(selectId.DepartmentID)

        },


        // 搜索功能
        searchFn() {
            if(this.searchVal == '') {
                this.list = this.parentList
            }

            this.list = this.parentList.filter((v)=>{
                return v.Username.indexOf(this.searchVal) > -1
            })
        },

        getChecked(){

            let arr = this.selectUserList.map(item => item.EmployeeID)

            this.$emit('setUser', arr, false)
        }
    }
}
</script>
